<template>
    <div class="file-check">
      <el-upload ref="upload" drag action 
      :on-change="handleChange" 
      multiple 
      :file-list="fileList"
      :auto-upload="false">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text" >
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
      </el-upload>
      <div class="content">
        <el-table v-if="initPreFileList.length" :data="initPreFileList" 
        size="small" 
        :show-header="false"
      style="width: 100%">
        <el-table-column align="left">
            <template slot-scope="{ row }">
              <div @click="previewImage(row.url)">

                <image-type :width="20" :fileType="row.fileType">{{ decodeURI(row.filename) }}</image-type>
              </div>
          </template>
        </el-table-column>
        <el-table-column align="left" width="50">
            <template slot-scope="{ row, $index }">
              <div class="filebtn">
                <i class="complete el-icon-circle-check" style="color:#67c23a;"></i>
                <i class="delete el-icon-close" @click="deleteHasFile($index, row.id)"></i>
              </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
      <div class="content">
          <el-table v-if="fileList.length" :data="fileList" 
          size="small" 
          :show-header="false"
        style="width: 100%">
          <el-table-column align="left" prop="name" min-width="200">
              <template slot-scope="{ row }">
                  <image-type :width="20" :fileType="row.fileType">{{row.name }}</image-type>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="size" min-width="80">
              <template slot-scope="{ row }">{{ row.size | formatFileSize }}</template>
          </el-table-column>
          <el-table-column min-width="50">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="handDelFile(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <span class="text">文件上传进度</span> -->
        <!-- <el-progress :percentage="uploadPress" :stroke-width="10" class="process"></el-progress> -->
      </div>
      
      <div class="footer" v-if="fileList.length && !preview">
          <el-row type="flex">
              <span class="total">共{{ fileList.length }}个文件，总文件大小:{{ totalSize | formatFileSize}}</span>
          </el-row>
      </div>
    </div>
  </template>
  <script>
  import axios from 'axios'
  import Cookies from 'js-cookie'
  import { getFileType } from '@/utils/index.js'
  import { delHasFile } from '@/api/work.js'
  export default {
      name: 'FileCheck',
      props:{
        preview:{
              type: Boolean,
              default: false
          },
        isEdit: {
            type: Boolean,
            default: false
        },
        preFileList:{
            type: Array
        }
      },
      watch: {
        preFileList(files){
          if(files){
            this.initPreFileList = files
          }
        }
      },
      computed:{
          uploadStatus(){
              return this.uploadPress === 100 ? 'success' : ''
          }
      },
      components: {
        'ImageType': () => import('@/components/ImageType')
      },
      data() {
        return {
          fileList:[], // 文件列表
          initPreFileList: [] 
        }
      },
    //   created() {
    //       this.preiewFileList = this.preFileList
    //   },
      methods:{
          // 选择文件
        handleChange(file, fileList) {
          fileList = fileList.filter(file => file.size)
          const list = []
          this.totalSize = fileList.reduce(( p, v) =>{ return p + v.size }, 0)
          fileList.forEach(e =>{
              let type = { fileType: getFileType(e.name, '.') }
              list.push(Object.assign(e,type))
          })
          this.fileList = list
          this.$emit('changeFiles', this.fileList)
        },
        // 删除已上传文件
        deleteHasFile(index, id){
          this.$confirm('即将删除已上传文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delHasFile(id).then(res =>{
              if(res){
                this.initPreFileList.splice(index, 1)
              }
            })
          })
        },
        // 删除文件 
        handDelFile(index, row){
          this.fileList.splice(index,1)
          this.$emit('changeFiles', this.fileList)
        },
        // 预览图片
        previewImage(url){
          window.open(url,'_blank')
        },
        // 进度条颜色区间
        customColorMethod(percentage) {
          if (percentage < 30) {
            return '#909399';
          } else if (percentage < 70) {
            return '#e6a23c';
          } else {
            return '#67c23a';
          }
        },
        clear(){
            this.fileList = []
          this.uploadPress = 0
          this.uploadResult = false
          this.source = null
        }
      }
  }
  </script>
  <style lang="scss">
  
  .file-check {
      .content{
          max-width: 50vh;
          tr{
            cursor: pointer;
          }
          tr:hover .delete{
              display: inline-block;
            }
            tr:hover .complete{
              display: none
            }
          .filebtn{
            .complete{

            }
            .delete{
              display: none;
            }
            
          }
      }
      .footer{
          margin-top: 10px;
          font-size: 14px;
          .result{
              font-size: 14px;
      font-weight: bold;
      color: #4CAF50;
      display: inline-block;
      margin-left: 10px;
          }
          .process{
              margin-left: 20px;
          }
          .toolBox{
              margin-top: 15px;
          }
      }
  .el-upload{
      width: 100%;
      max-width: 50vh;
  }
  .el-upload-dragger{
      width: auto;
  }
  .el-upload-list{
      display: none;
  }
  }
  </style>